<template>
  <div>
      <div class="banner">
          <div class="top">
              <img :src="head_img" alt="">
              <p>{{info.nickname}}</p>
              <router-link to="myset">
              </router-link>
          </div>
          <div class="info">
              <li>
                  <p>账号</p>
                  <p>{{info.account}}</p>
              </li>
              <li>
                  <p>ID</p>
                  <p>{{info.id}}</p>
              </li>
          </div>
          <div class="sign">
              <a href="#"></a>
              <p>签到获取积分赢大奖</p>
              <span>签到 ></span>
          </div>
      </div>
      <div class="space"></div>
      <div class="list">
          <router-link to="market">
          <li>
              <img src="../assets/user/user_1.png" alt="">
              <p>行情收益</p>
              <a href="#"></a>
          </li>
          </router-link>
          <router-link to="assets">
          <li>
              <img src="../assets/user/user_2.png" alt="">
              <p>我的资产</p>
              <a href="#"></a>
          </li>
          </router-link>
          <router-link to="mywallet">
          <li>
              <img src="../assets/user/user_3.png" alt="">
              <p>我的钱包</p>
              <a href="#"></a>
          </li>
          </router-link>
      </div>
    <div class="space"></div>
    <div class="list">
        <router-link to="myinfo">
          <li>
              <img src="../assets/user/user_4.png" alt="">
              <p>个人资料</p>
              <a href="#"></a>
          </li>
          </router-link>
          <router-link to="serve">
          <li>
              <img src="../assets/user/user_5.png" alt="">
              <p>联系客服</p>
              <a href="#"></a>
          </li>
          </router-link>
          <router-link to="myteam">
          <li>
              <img src="../assets/user/user_6.png" alt="">
              <p>我的团队</p>
              <a href="#"></a>
          </li>
          </router-link>
          <router-link to="help">
          <li>
              <img src="../assets/user/user_7.png" alt="">
              <p>在线帮助</p>
              <a href="#"></a>
          </li>
          </router-link>
      </div>
  </div>
</template>

<script>
import api from "../axios/api"
export default {
    data(){
        return{
            id:null,
            info:{},
            head_img:null,
        }
    },
    mounted(){
        this.id = localStorage.getItem("id")
        this.getinfo()
    },
    methods:{
         getinfo(){
           let data = {
                id:this.id,
           }
           this.$post(api.userinfo,data).then(res=>{
        if(res.code == 0){
            this.info = res.data
            this.head_img = res.data.head_img
        }else{
            this.$toast(res.error)
        }
    })
       },
    }
}
</script>

<style lang="less" scoped>
.space {
    height: 6px;
    background-color: #f6f6f6;
}
.banner {
    width: 100%;
    height: 250px;
    background: url("../assets/user/user_01.jpg") no-repeat;
    background-size: 100%;
    .top{
        width: 100%;
        height: 124px;
        text-align: center;
        img{
            margin: 20px 0px 10px 0px;
            width: 70px;
            height: 70px;
            border-radius: 50%;
        }
        p{
            color: #fff;
            font-weight: 600;
            font-size: 15px;
        }
        a{
            display: block;
            background: url("../assets/user/set.png") no-repeat;
            width: 20px;
            height: 20px;
            background-size: 100%;
            position: absolute;
            top: 20px;
            right: 20px;
        }
    }
    .info{
        margin-top: 10px;
        display: flex;
        text-align: center;
        color: #fff;
        height: 30px;
        font-size: 13px;
        li:nth-child(1){
            border-right: 1px solid #ffd487;
        }
        li{
            display: flex;
            width: 50%;
            flex-wrap: wrap;
            p{
                width: 100%;
            }
            p:nth-child(2){
                margin-top: 3px;
            }
        }
    }
    .sign{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100px;
        a{
            display: block;
            background: url("../assets/user/jifen.png") no-repeat;
            width: 30px;
            height: 30px;
            background-size: 100%;
        }
        p{
            margin-left: 5px;
            font-size: 14px;
        }
        span {
            margin-left: 40px;
            width: 70px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: #fdb318;
            color: #fff;
            border-radius: 15px;
            font-size: 14px;
        }
    }
}
.list {
    width: 90%;
    margin: 0 auto;
    li{
        line-height: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        margin-left: 10px;
        border-bottom: 1px solid #f6f6f6;
        img{
            width: 15px;
            height: 15px;
            background-size: 100%;
        }
        p{
            margin-left: 15px;
            font-size: 14px;
            width: 90%;
        }
        a{
            display: block;
            width: 6px;
            height: 12px;
            background: url("../assets/user/back.png") no-repeat;
            background-size: 100%;
            
        }
    }
}
</style>